<template>
    <div class="center">
      <my-header
        title="总装出成品库"
        showdatatext="合计：108辆"
        v-bind:showdata="showdata"
        v-bind:showbtn="showbtn"
      />
      <div class="data" id="zongzhuangchuchengpinku_main"></div>
    </div>
  </template>
      <script>
  import * as echarts from "echarts";
  import myheader from "./myheader";
  
  export default {
    components: {
      "my-header": myheader,
    },
    name: "zongzhuangchuchengpinku",
    data() {
      return {
        showdata: true,
        showbtn: false,
      };
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        let chartDom = document.getElementById("zongzhuangchuchengpinku_main");
        let myChart = echarts.init(chartDom, "dark");
        let option;
  
        option = {
          title: {
            text: "",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: [
              "8:00",
              "",
              "10:00",
              "",
              "12:00",
              "",
              "14:00",
              "",
              "16:00",
              "",
              "18:00",
              "",
              "20:00",
            ],
          },
  
          yAxis: {
            type: "value",
            min: 0,
            max: 40,
          },
          series: [
            {
              name: "",
              symbolSize: 10, //设定实心点的大小
              type: "line",
              data: [10, 25, 14, 37, 22, 33, 13, 10, 25, 14, 37, 22, 33, 13],
              areaStyle: {},
              smooth: true,
              itemStyle: {
                normal: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(72, 128, 255, 0.5)",
                      },
                      {
                        offset: 1,
                        color: "rgba(72, 128, 255, 0)",
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                  lineStyle: {
                    color: "rgba(72, 128, 255)",
                  },
                  borderColor: "#FFFFFF",
                  borderWidth: 1,
                },
              },
            },
          ],
        };
  
        option && myChart.setOption(option);
      },
    },
  };
  </script>
      <style  scoped>
  .center {
    width: 100%;
    height: 100%;
  }
  .data {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: rgb(10, 19, 43);
    border: 1px solid rgb(85, 125, 219);
  }
  </style>
      